<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG创建元素</title>
    <style>
        body{
            text-align: center;
        }
        svg{
           background: #aaa;
        }
    </style>
    <script src="../../day02/canvas/demo/jquery.js"></script>
</head>
<body>
    <svg width="500" height="400" id="svg">

    </svg>
    <script>
        /**
         *
         * 效果：渐变的柱状图
         */
        //方式一拼接字符串
        //方式二：使用document.createElementNS()
        //var rect=document.createElementNS("http://www.w3.org/2000/svg","rect");
        //rect.setAttribute("x",450);
        var sW=svg.getAttribute("width");
        var sH=svg.getAttribute("height");
        $.ajax({
            type:"get",
            url:"./salesdata.php",
            success:function (data) {
                var zhuW=sW/(data.length*2+1);
                for(var i=0;i<data.length;i++){
                    var rect=document.createElementNS("http://www.w3.org/2000/svg","rect");
                    rect.setAttribute("width",zhuW);
                    rect.setAttribute("height",data[i].value);
                    rect.setAttribute("x",zhuW*(i*2+1));
                    rect.setAttribute("y",(sH-data[i].value));
                    rect.setAttribute("fill",radomColor());
                    svg.appendChild(rect);
                }
            }
        });
        function radomColor(){
            var r=parseInt(Math.random()*150+100);
            var g=parseInt(Math.random()*150+100);
            var b=parseInt(Math.random()*150+100);
            return "rgb("+r+","+g+","+b+")"
        }

    </script>
</body>
</html>